<%-- Created by IntelliJ IDEA. User: Administrator Date: 2022/12/6 Time: 21:04
To change this template use File | Settings | File Templates. --%> <%@ page
contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>角色信息</title>
    <!-- 引入 样式 和 js -->
    <jsp:include page="../common/css_js.jsp" />
    <jsp:include page="../common/table.jsp" />
  </head>
  <body>
    <div class="container col-lg-12">
      <div class="card">
        <header class="card-header">
          <div class="card-title">
            <b style="font-size: 22px">客戶列表--所有客戶信息</b>
          </div>
        </header>
        <div class="card-body">
          <!-- 条件查询表单 -->
          <form class="form-inline" name="form1" action="#" method="post">
            客户名称：<label>
              <input
                name="customerName"
                placeholder="请输入要查询的客户名称"
                class="form-control"
              /> </label
            >&nbsp; 客户等级：<label>
              <select name="customerLevel" class="form-control">
                <option value="">请选择</option>
                <option value="战略合作伙伴">战略合作伙伴</option>
                <option value="大客户">大客户</option>
                <option value="重点开发客户">重点开发客户</option>
              </select> </label
            >&nbsp; 客户信誉度：<label>
              <select name="customerNeed" class="form-control">
                <option value="">请选择</option>
                <option value="☆☆☆☆☆">☆☆☆☆☆</option>
                <option value="☆☆☆☆">☆☆☆☆</option>
                <option value="☆☆☆">☆☆☆</option>
                <option value="☆☆">☆☆</option>
                <option value="☆">☆</option>
              </select> </label
            >&nbsp; 客户地址：<label>
              <input
                name="customerAddress"
                class="form-control"
                placeholder="请输入要查询的客户地址"
              /> </label
            >&nbsp;
            <button type="button" class="btn btn-primary" onclick="like()">
              <span class="mdi mdi-table-search"></span>搜索
            </button>
          </form>
          <!-- 操作 -->
          <div id="toolbar">
            <a class="btn btn-primary" onclick="toAdd()"
              ><span class="mdi mdi-plus"></span>新增客户</a
            >
            <a class="btn btn-primary" onclick="other(1)"
              ><span class="mdi mdi-link"></span>联系人查看</a
            >
            <a class="btn btn-primary" onclick="other(2)"
              ><span class="mdi mdi-record"></span>交往记录查看</a
            >
            <a class="btn btn-primary" onclick="other(3)"
              ><span class="mdi mdi-chess-bishop"></span>订单查看</a
            >
            <a class="btn btn-danger" href="#" onclick="batchDelete('customer')"
              ><span class="mdi mdi-delete"></span>批量删除</a
            >
            <a class="btn btn-primary" href="#" onclick="query()"
              ><span class="mdi mdi-table-large"></span>显示所有</a
            >
          </div>
          <!-- 数据显示 -->
          <div class="table-responsive">
            <table id="table"></table>
          </div>
        </div>
      </div>
    </div>

    <!-- Modal -->
    <div
      class="modal fade bd-example-modal-lg"
      id="myModal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="myModalLabel"
    >
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title" id="myModalLabel">新增客户信息</h4>
            <div class="col-md-2 column"></div>
            <div class="col-md-4 column" id="close"></div>
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <a aria-hidden="true">&times;</a>
            </button>
          </div>
          <div class="modal-body" style="background-color: #f8faf7">
            <!-- 增加修改表单 -->
            <div class="table-responsive">
              <form>
                <table class="table table-bordered table-hover" id="tab333">
                  <input type="hidden" name="id" />
                  <input type="hidden" name="customerNo" />
                  <tr>
                    <td>客户名称：</td>
                    <td>
                      <label
                        ><input
                          name="customerName"
                          class="form-control"
                          placeholder="请输入客户名称"
                      /></label>
                    </td>
                    <td>客户专区：</td>
                    <td>
                      <label
                        ><input
                          name="customerArea"
                          class="form-control"
                          placeholder="请输入客户专区"
                      /></label>
                    </td>
                  </tr>
                  <tr>
                    <td>客户经理：</td>
                    <td>
                      <label
                        ><input
                          name="customerManager"
                          class="form-control"
                          placeholder="请输入客户经理"
                      /></label>
                    </td>
                    <td>客户等级：</td>
                    <td>
                      <label>
                        <select name="customerLevel" class="form-control">
                          <option value="">请选择</option>
                          <option value="战略合作伙伴">战略合作伙伴</option>
                          <option value="大客户">大客户</option>
                          <option value="重点开发客户">重点开发客户</option>
                        </select> </label
                      >&nbsp;
                    </td>
                  </tr>
                  <tr>
                    <td>客户满意度：</td>
                    <td>
                      <label>
                        <select name="customerCacsi" class="form-control">
                          <option value="">请选择</option>
                          <option value="☆☆☆☆☆">☆☆☆☆☆</option>
                          <option value="☆☆☆☆">☆☆☆☆</option>
                          <option value="☆☆☆">☆☆☆</option>
                          <option value="☆☆">☆☆</option>
                          <option value="☆">☆</option>
                        </select>
                      </label>
                    </td>
                    <td>客户信誉度：</td>
                    <td>
                      <label>
                        <select name="customerNeed" class="form-control">
                          <option value="">请选择</option>
                          <option value="☆☆☆☆☆">☆☆☆☆☆</option>
                          <option value="☆☆☆☆">☆☆☆☆</option>
                          <option value="☆☆☆">☆☆☆</option>
                          <option value="☆☆">☆☆</option>
                          <option value="☆">☆</option>
                        </select>
                      </label>
                    </td>
                  </tr>
                  <tr>
                    <td>客户地址：</td>
                    <td colspan="3">
                      <label>
                        <textarea
                          name="customerAddress"
                          cols="80"
                          class="form-control"
                          placeholder="请输入客户地址"
                        ></textarea>
                      </label>
                    </td>
                  </tr>
                  <tr>
                    <td>是否有效：</td>
                    <td>
                      <div
                        class="custom-control custom-radio custom-control-inline"
                      >
                        <input
                          type="radio"
                          id="customRadioInline1"
                          name="isValid"
                          value="1"
                          class="custom-control-input"
                          checked="checked"
                        />
                        <label
                          class="custom-control-label"
                          for="customRadioInline1"
                          >有效</label
                        >
                      </div>
                      <div
                        class="custom-control custom-radio custom-control-inline"
                      >
                        <input
                          type="radio"
                          id="customRadioInline2"
                          name="isValid"
                          value="0"
                          class="custom-control-input"
                        />
                        <label
                          class="custom-control-label"
                          for="customRadioInline2"
                          >无效</label
                        >
                      </div>
                    </td>
                  </tr>
                </table>
              </form>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">
              关闭
            </button>
            <button
              type="button"
              id="btn111"
              class="btn btn-primary"
              onclick="insert_update()"
            >
              保存
            </button>
          </div>
        </div>
      </div>
    </div>
    <script type="text/javascript">
      $(function () {
        // 初始化表格
        $("#table").bootstrapTable({
          classes: "table table-bordered table-hover table-striped text-nowrap", // 表格样式
          url: "${ctx}/customer/list", // 请求后台的URL
          method: "GET", // 请求方式
          toolbar: "#toolbar",
          pagination: true, //是否显示分页条
          pageNumber: 1, // 首页页码，默认为1
          pageSize: 5, //一页显示的行数
          paginationLoop: false, //是否开启分页条无限循环，最后一页时点击下一页是否转到第一页
          pageList: [5, 10, 20], //选择每页显示多少行，数据过少时可能会没有效果
          clickToSelect: true, // 是否启用点击选中行
          undefinedText: "-", // 当字段为 undefined 显示
          sortOrder: "asc", // 排序方式
          showColumns: true, // 是否显示所有的列
          showRefresh: true, // 是否显示刷新按钮
          showToggle: true, // 是否显示详细视图和列表视图的切换按钮(clickToSelect同时设置为true时点击会报错)
          showExport: true, // 是否显示导出按钮, 导出功能需要导出插件支持(tableexport.min.js)
          exportDataType: "all", // 导出数据类型, 'basic':当前页, 'all':所有数据, 'selected':选中的数据
          // 响应处理
          responseHandler: function (res) {
            if (res.code !== 200) {
              notify("mdi mdi-close", res.message, "danger");
              return [];
            }

            return res.data;
          },
          // 查询参数
          queryParams: function () {
            // 查询条件
            return $("[name='form1']").serializeArray(); // 得到条件查询表单中所有的值
          },
          columns: [
            {
              // 列
              field: "example",
              checkbox: true, // 是否显示复选框
            },
            {
              field: "no", // 属性名
              align: "center", // 对齐方式
              title: "序号", // 标题
              formatter: function (value, row, index) {
                return index + 1;
              },
            },
            {
              field: "id",
              title: "编号",
              visible: false,
            },
            {
              field: "customerNo",
              align: "center",
              title: "客户编号",
            },
            {
              field: "customerName",
              align: "center",
              title: "客户名称",
            },
            {
              field: "customerArea",
              align: "center",
              title: "客户专区",
            },
            {
              field: "customerManager",
              align: "center",
              title: "客户经理",
            },
            {
              field: "customerLevel",
              align: "center",
              title: "客户等级",
            },
            {
              field: "customerCacsi",
              align: "center",
              title: "客户满意度",
            },
            {
              field: "customerNeed",
              align: "center",
              title: "客户信誉度",
            },
            {
              field: "customerAddress",
              align: "center",
              title: "客户地址",
            },
            {
              field: "createDate",
              align: "center",
              title: "创建时间",
            },
            {
              field: "operate",
              align: "center",
              title: "操作",
              formatter: btnGroup,
              events: {
                // 事件
                "click .edit-btn": function (event, value, row, index) {
                  edit(row);
                },
                "click .del-btn": function (event, value, row, index) {
                  remove("customer", row.id);
                },
              },
            },
          ],
          onLoadSuccess: function () {
            // 数据加载成功时调用的方法
          },
          onLoadError: function () {
            // 数据加载失败时调用的方法
            setTimeout(function () {
              notify("mdi mdi-close", "数据加载失败!", "danger");
            }, 300);
          },
          onCheck: function () {
            // 复选框单击事件
            getSelections();
          },
        });
      });

      // 操作方法 - 新增
      function toAdd() {
        // 模态框显示
        $("#myModal").modal("show");
        // 清空表单
        $("form")[1].reset();
        // 模态框标题
        $("#myModalLabel").html("新增客户信息");
        // 将按钮修改为保存
        $("#btn111").html("保存");
      }

      // 操作方法 - 编辑
      function edit(r) {
        // 模态框显示
        $("#myModal").modal("show");
        // 模态框标题
        $("#myModalLabel").html("修改客户信息");
        // 赋值
        $("[name='id']").val(r.id);
        $("[name='customerNo']").val(r.customerNo);
        $("[name='customerName']:eq(1)").val(r.customerName);
        $("[name='customerArea']").val(r.customerArea);
        $("[name='customerManager']").val(r.customerManager);
        $("[name='customerLevel']:eq(1)").val(r.customerLevel);
        $("[name='customerCacsi']").val(r.customerCacsi);
        $("[name='customerNeed']:eq(1)").val(r.customerNeed);
        $("[name='customerAddress']:eq(1)").val(r.customerAddress);
        // 将按钮修改为修改
        $("#btn111").html("修改");
      }

      // 操作方法 - 保存,修改
      function insert_update() {
        let b = false;
        let $customerName = $("[name='customerName']:eq(1)");
        let $customerArea = $("[name='customerArea']");
        let $customerManager = $("[name='customerManager']");
        let $customerLevel = $("[name='customerLevel']:eq(1)");
        let $customerCacsi = $("[name='customerCacsi']");
        let $customerNeed = $("[name='customerNeed']:eq(1)");
        let $customerAddress = $("[name='customerAddress']:eq(1)");

        if ($customerName.val() === "") {
          notify("mdi mdi-close", "客户名称为必填项！", "danger");
          $customerName.focus();
        } else if ($customerArea.val() === "") {
          notify("mdi mdi-close", "客户专区为必填项！", "danger");
          $customerArea.focus();
        } else if ($customerManager.val() === "") {
          notify("mdi mdi-close", "客户经理必填项！", "danger");
          $customerManager.focus();
        } else if ($customerLevel.val() === "") {
          notify("mdi mdi-close", "请选择客户等级！", "danger");
          $customerLevel.focus();
        } else if ($customerCacsi.val() === "") {
          notify("mdi mdi-close", "请选择客户满意度！", "danger");
          $customerCacsi.focus();
        } else if ($customerNeed.val() === "") {
          notify("mdi mdi-close", "请选择客户信誉度！", "danger");
          $customerNeed.focus();
        } else if ($customerAddress.val() === "") {
          notify("mdi mdi-close", "客户地址为必填项！", "danger");
          $customerAddress.focus();
        } else {
          b = true;
        }

        if (b) {
          // 根据按钮判断增加还是修改
          let url =
            $("#btn111").html() === "保存"
              ? "${ctx}/customer/save"
              : "${ctx}/customer/update";

          // 得到表单中的值
          let obj = $("form:eq(1)").serializeArray();

          // 调用保存方法
          saveOrUpdate(url, obj);
        }
      }

      // 操作按钮客户联系人
      function other(num) {
        if (getSelections().length < 1) {
          setTimeout(function () {
            notify(
              "mdi mdi-alert-octagon-outline",
              "请选择要查看的客户!",
              "warning"
            );
          }, 300);
        } else if (getSelections().length > 1) {
          setTimeout(function () {
            notify(
              "mdi mdi-alert-octagon-outline",
              "暂不支持多个客户查看!",
              "danger"
            );
          }, 300);
        } else {
          let loader = $("body").lyearloading({
            opacity: 0.2,
            spinnerSize: "lg",
            backgroundColor: "gray",
            spinnerText: "页面加载中，请稍后...",
            textColorClass: "text-success",
            spinnerColorClass: "text-success",
          });
          setTimeout(function () {
            loader.destroy();
            if (num === 1) {
              location.href = "${ctx}/page/linkage/" + getSelections();
            } else if (num === 2) {
              location.href = "${ctx}/page/contact/" + getSelections();
            } else if (num === 3) {
              location.href = "${ctx}/page/order/" + getSelections();
            } else {
              location.href = "${ctx}/page/customer";
            }
          }, 1e3);
        }
      }
    </script>
  </body>
</html>
